<template>
    <div class="callRecordContiner">
        <div class="callRecordWrap">
            
            <!--通话记录列表-->
            <mt-loadmore id='refresh' :top-method="loadTop" :bottom-all-loaded="allLoaded" ref="allLoadMore" :bottomDistance="30" v-if="!showNoData" style="min-height:100%;overflow:inherit">
            <ul class="callRecordList"
                style="background:#fff"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="busy"
                infinite-scroll-immediate-check="true"
                infinite-scroll-distance="30">
                <!--子项-->
                <li class="callRecordItem" v-for="(item,key) in callRecordArr" :key="key">
                    <div class="callRecordItem-left">
                        <!--通话时间-->
                        <p class="callTime">{{item.telTime}}</p>
                        <!--手机号码-->
                        <div class="callTel">呼叫&nbsp;{{item.mobile.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')}}</div>
                    </div>
                    <div class="callRecordItem-right">
                        <div v-if="item.isTracked == 0" class="hasColor" @click="goAddrecord(item.customerName,item.customerResource,item.customerNum,item.customerType,item.id)" htmdEvt='goApprecord'><i class="iconfont" style="font-size: .65rem;margin-right: .25rem">&#xe65a;</i>跟踪记录</div>
                        <div v-else><i class="iconfont" style="font-size: .65rem;margin-right: .25rem">&#xe65b;</i>已填跟踪</div>
                    </div>
                </li>
            </ul>
            </mt-loadmore>
            <div class="noDataImg">
               <noData :showNoData="showNoData" :show="show"></noData>
            </div>
            <!--显示加载中状态-->
            <div class="loadingBox" v-if="loading">
                <mt-spinner type="snake" class="loading-more"  color="#FF8637"></mt-spinner>
            </div>
            <div class="noMore" v-if="noMore">亲，已经到底了哦！</div>
            </div>
    </div>
</template>
<script  type="text/javascript">
window.FromAppRefresh = function (statusCode) {
    getVueMethod();
}
    // import noData from '@src/common/noData/noData';
    import noData from '@src/common/components/noData/noData';
    export default {
        name: "callRecordPage",
        components: {
            noData:noData
        },
        data(){
            return {
                callRecordArr:[],
                allLoaded: false,
                busy: false,
                pageNum: 1,
                loading: true,
                noMore: false,
                showNoData: false, 
                show: 'show',
                customerNo: '',
                customerType: ''
            }
        },
        created(){
            let deUrl = decodeURI(window.location.href)
            this.customerNo = splitUrl(deUrl)['customerNo']
            this.customerType = splitUrl(deUrl)['customerType']
        },
        mounted(){
            window.getVueMethod = this.refreshData
            this.loadTop()
        },
        methods: {
            // 原生调用刷新数据
            refreshData(){
                 this.loadTop()
            },
            // 去原生添加跟踪记录页面
            goAddrecord(customerName,customerStatus,customerId,customerType,callRecordId){
               let params = {
                   customerName: customerName,
                   customerStatus: customerStatus,
                   customerId: customerId,
                   customerType: customerType,
                   callRecordId: callRecordId
               }
               console.log('11111',params)
            //    if( !window.appIsIOS ){
            //     //安卓手机，可以使用这种办法
            //     window.jsObj.gotoAddTraceRecordFromCallRecords(JSON.stringify(params))
            //   }else{
            //       window.webkit.messageHandlers.gotoAddTraceRecordFromCallRecords.postMessage(JSON.stringify(params))
            //   }
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            // console.log('是否是Android：'+isAndroid)
            // console.log('是否是iOS：'+isiOS)
            if(isAndroid){
               window.jsObj.gotoAddTraceRecordFromCallRecords(JSON.stringify(params))
            }else{
                window.webkit.messageHandlers.gotoAddTraceRecordFromCallRecords.postMessage(params)
            }
            },
            // 下拉刷新方法
           loadTop(){
               this.pageNum = 1
               this.busy = false
               this.noMore = false
               this.loading = false
               this.inintData('loadTop')
           },
        // 上拉加载方法
           loadMore(){
               console.log('触发上拉加载')
               this.pageNum ++
               this.loading = true
               this.busy = true
               setTimeout(()=>{
                  this.inintData('loadMore')
               },1000)
           },
           // 初始化数据   
           inintData(type) {
               this.$axiosHttp.http({
                method: "POST",
                url: apiUrl.inintCallrecord,
                needFailCallback: true,
                params:{
                    pageNum: this.pageNum,
                    pageSize: 10,
                    customerNo: this.customerNo,
                    // customerNo: 547215,
                    customerResource: this.customerType
                    // customerResource: 0
                }
                }, (res) => {
                    console.log('进入成功')
                    console.log(res.data.data.result)
                    if(type == 'loadTop'){
                        this.callRecordArr = res.data.data.result
                        this.$refs.allLoadMore.onTopLoaded();
                    }else{
                        this.loading = false
                        this.busy = false
                        this.callRecordArr = this.callRecordArr.concat(res.data.data.result);
                    }
                    
                }, (res) => {
                    this.$toast(res.data.message)
                },
                (res) => {
                    console.log('jin',res)
                    // 上拉加载的时候没有数据了
                    if(res.data.status == 1000 && type == 'loadMore'){
                         this.loading = false
                         this.busy = true
                         this.noMore = true
                    }else{
                        this.loading = false
                        this.busy = true
                        this.showNoData = true
                    }
                })
        }
      }
    }
</script>
<style>
.wrap{
    background: white;
}
.callRecordContiner{
    width:100%;
    /* min-height: 6rem; */
    /* background-color: #fff; */
}
.callRecordContiner .callRecordWrap{
    width: 100%;
}
.callRecordContiner .headMsg{
    width: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: center;
    background: white;
    color: #121C32;
    font-size: .85rem;
    display: flex;
    justify-content: space-between;
    border-bottom: solid #E1E4EB .025rem;
}
.callRecordContiner .headMsg .goBack{
    margin-left: .8rem;
}
.callRecordContiner .callRecordWrap .callRecordList .callRecordItem{
    width: 92%;
    height: 3.75rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid #E1E4EB .025rem;
}
.callRecordContiner .callRecordWrap .callRecordList .callRecordItem .callRecordItem-left .callTel{
    font-size: .7rem;
    color:#707A8D;
    line-height: 1.3rem;
}
.callRecordContiner .callRecordWrap .callRecordList .callRecordItem .callRecordItem-left .callTime{
    color: #141C30;
    line-height: 1.3rem;
}
.callRecordContiner .callRecordWrap .callRecordList .callRecordItem .callRecordItem-right {
    font-size: .65rem;
    color: #999;
}
.callRecordContiner .callRecordWrap .callRecordList .callRecordItem .callRecordItem-right .hasColor{
    color: #FF8637;
}
.callRecordContiner .callRecordWrap .showMore{
    margin: 1rem auto;
    text-align: center;
    color: #B2B6BF;
    font-size: .3rem;
}
.loadingBox{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 2rem;
}
.noMore{
    text-align: center;
    line-height: 2rem;
}
</style>
